Tracy Bianca
December 19 at 8:55 PM
You sent
Enter
You sent
Enter
You sent
Enter
You sent
Enter
You sent
0:12
Enter
You sent
<div class="banner">
<!-- Image Slider -->
<div class="images">
<img src="./website/pictures/hen.jpg" alt="Chicken Recipe 1">
<img src="./website/pictures/chick.jpg" alt="Chicken Recipe 2">
<img src="./website/pictures/eggs.jpg" alt="Chicken Recipe 3">
</div>
<!-- Text Overlay -->
<div class="text-overlay">
<h1>Explore All Of our</h1>
<h2>Contact Information</h2>
</div>
</div>
<section class="map-section">
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3913.6680645926926!2d121.13607238006054!3d14.746228636793196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397bb31a5149651%3A0xde8ddcc54ad70375!2sRodriguez%20Rizal!5e1!3m2!1sfil!2sph!4v1731259811290!5m2!1sfil!2sph"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
<div class="contact-container">
<div class="contact-info">
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Location</h4>
<p>AmityVille San Jose, Rodriguez Rizal</p>
</div>
</div>
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Open Hours</h4>
<p>Monday-Saturday:<br>11:00 AM - 23:00 PM</p>
</div>
</div>
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Call Us</h4>
<p>+93 977 446 464 646</p>
</div>
</div>
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Email Us</h4>
<p>info@example.com</p>
</div>
</div>
</div>
<div class="contact-form">
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<input type="text" placeholder="Subject" required>
<textarea placeholder="Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div>
<!-- Footer -->
<footer class="row text-left bg-honeycomb">
<div id="footer" class="section-p1 col-xs-12">
<div class="col">
<h4>Contact</h4>
<p><strong>Address:</strong> AmityVille San Jose, Rodriguez Rizal</p>
<p><strong>Phone:</strong> +93 977 446 464 646</p>
<p><strong>Hours:</strong> 9:00 - 6:00 pm, MON - Sat</p>
<div class="Follow">
<div class="icon"><strong>Follow us</strong></div>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<div class="col-about">
<h4>About</h4>
<a href="../about/about.html">About us</a>
<a href="#">Privacy policy</a>
<a href="#">Terms & Conditions</a>
<a href="../contact/contact.html">Contact us</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>Download our app</p>
<img src="./website/pictures/icons8-playstore-24.png" alt="Play Store">
<p>QR code for the app:</p>
<img class="qw" src="./website/pictures/icons8-qr-50.png" alt="QR Code">
</div>
<div class="copyright col-xs-12">
<p>©2024, Website Activity (4H) Group 7- HTML CSS PHP JS Advertisement</p>
</div>
</footer>
</body>
</html>
</span>
<div>
<h4>Location</h4>
<p>AmityVille San Jose, Rodriguez Rizal</p>
</div>
</div>
<div class="info-item">
<span class="icon"></span>
<div>
<h4>Open Hours</h4>
<p>Monday-Saturday:<br>11:00 AM - 23:00 PM</p>
</div>
</div>
<div class="info-item">
<span class="icon"></span>
<div>
<h4>Call Us</h4>
<p>+93 977 446 464 646</p>
</div>
</div>
<div class="info-item">
<span class="icon"></span>
<div>
<h4>Email Us</h4>
<p>info@example.com</p>
</div>
</div>
</div>
<div class="contact-form">
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<input type="text" placeholder="Subject" required>
<textarea placeholder="Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div>
<!-- Footer -->
<footer class="row text-left bg-honeycomb">
<div id="footer" class="section-p1 col-xs-12">
<div class="col">
<h4>Contact</h4>
<p><strong>Address:</strong> AmityVille San Jose, Rodriguez Rizal</p>
<p><strong>Phone:</strong> +93 977 446 464 646</p>
<p><strong>Hours:</strong> 9:00 - 6:00 pm, MON - Sat</p>
<div class="Follow">
<div class="icon"><strong>Follow us</strong></div>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<div class="col-about">
<h4>About</h4>
<a href="../about/about.html">About us</a>
<a href="#">Privacy policy</a>
<a href="#">Terms & Conditions</a>
<a href="../contact/contact.html">Contact us</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>Download our app</p>
<img src="./website/pictures/icons8-playstore-24.png" alt="Play Store">
<p>QR code for the app:</p>
<img class="qw" src="./website/pictures/icons8-qr-50.png" alt="QR Code">
</div>
<div class="copyright col-xs-12">
<p>©2024, Website Activity (4H) Group 7- HTML CSS PHP JS Advertisement</p>
</div>
</footer>
</body>
</html>Enter
You sent
.banner {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
border-radius: 8px;
}
/* Image Slider */
.images {
position: relative;
width: 100%;
height: 100%;
}
.images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
animation: fade 12s infinite;
}
/* Fade Animation for Each Image */
.images img:nth-child(1) {
animation-delay: 0s;
}
.images img:nth-child(2) {
animation-delay: 4s;
}
.images img:nth-child(3) {
animation-delay: 8s;
}
/* Text Overlay */
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 5px;
}
.text-overlay h1 {
font-size: 2rem;
margin-bottom: 10px;
}
.text-overlay h2 {
font-size: 4rem;
color: #fff;
margin-bottom: 10px;
}
@keyframes slideIn {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.text-overlay h1, .text-overlay h2 {
animation: slideIn 2s ease-out forwards;
}
.text-overlay h1 {
animation-delay: 0s;
}
.text-overlay h2 {
animation-delay: 0.5s; /* Delay second text for a staggered effect */
}
/* Keyframes for Fade Animation */
@keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
33% { opacity: 1; }
43% { opacity: 0; }
100% { opacity: 0; }
}
.map-container {
width: 100%;
border: 2px solid #333;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding: 10px; /* Add padding */
}
.map-container iframe {
width: 100%;
height: 60vh; /* Make height responsive */
border: none;
}
.map-section {
width: 100%;
position: relative;
}
/* Media Query for smaller screens */
@media (max-width: 768px) {
.map-container {
border-radius: 4px; /* Reduce border radius */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce box shadow */
}
}
.order-container{
background-color: black; /* Green background */
color: white;
padding: 40px 20px;
text-align: center;
}
.order-container h2 {
font-size: 4rem;
margin-bottom: 20px;
color: #486a5a;
font-family: 'Amatic Sc';
font-weight: bolder;
}
.order-container p {
font-size:2rem;
margin-bottom: 20px;
color: #ffc107;
}
.contact-info {
font-size: 1.1rem;
}
.contact-info ul {
list-style-type: none;
padding: 0;
}
.contact-info ul li {
display: inline;
margin: 0 10px;
}
.contact-info ul li a {
color: #486a5a;
text-decoration: none;
font-weight: bold;
font-size: large;
}
.contact-info ul li a:hover {
text-decoration: underline;
}
Enter
Today at 7:38 PM
You sent
Enter
You sent
Enter
You sent
<link rel="icon" href="./website/pictures/android-chrome-512x512.png" type="image/x-icon">
Enter
You sent
Enter
You sent
Enter
You sent
Enter
You sent
Enter
You sent
Sent 7m ago
Enter
Write to
Chat info
Customize chat
Media, files and links
Media
Files
Links
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)